<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="icons.css">
    <style>
      html {
        font-size: 10px;
        font-family: sans-serif;
      }

      #icon-list {
        font-weight: normal;
        margin: 4rem 0 4rem 4rem;
        list-style: none;
      }

      #icon-list li {
        font-size: 1.8rem;
        line-height: 2rem;
        color: #005466;
        position: relative;
        margin: 1rem;
        display: inline-block;
        width: 20rem;
        height: 4rem;
      }

      #icon-list li:before {
        position: absolute;
        background-color: #005466; 
        width: 3rem;
        height: 3rem;
        border-radius: 0.3rem;
        left: -4.5rem;
        top: 0;
        padding: 0.5rem;
      }
    </style>
  </head>

  <body>
    <ul id="icon-list">
      <li class="icon" data-icon="1">icon-menu<br/>(1)</li>
      <li class="icon" data-icon="2">icon-add<br/>(2)</li>
      <li class="icon" data-icon="3">icon-back<br/>(3)</li>
      <li class="icon" data-icon="4">icon-close<br/>(4)</li>
      <li class="icon" data-icon="5">icon-settings<br/>(5)</li>
      <li class="icon" data-icon="6">icon-more<br/>(6)</li>
      <li class="icon" data-icon="7">icon-search<br/>(7)</li>
      <li class="icon" data-icon="8">icon-search-small<br/>(8)</li>
      <li class="icon" data-icon="9">icon-mask<br/>(9)</li>
      <li class="icon" data-icon="q">icon-good<br/>(q)</li>
      <li class="icon" data-icon="w">icon-bad<br/>(w)</li>
      <li class="icon" data-icon="e">icon-delete<br/>(e)</li>
      <li class="icon" data-icon="r">icon-keyboard<br/>(r)</li>
      <li class="icon" data-icon="t">icon-picture<br/>(t)</li>
      <li class="icon" data-icon="y">icon-smiley<br/>(y)</li>
      <li class="icon" data-icon="u">icon-message-quote<br/>(u)</li>
      <li class="icon" data-icon="i">icon-message<br/>(i)</li>
      <li class="icon" data-icon="o">icon-message-ask<br/>(o)</li>
      <li class="icon" data-icon="p">icon-eye<br/>(p)</li>
      <li class="icon" data-icon="a">icon-message-square<br/>(a)</li>
      <li class="icon" data-icon="s">icon-camera<br/>(s)</li>
      <li class="icon" data-icon="d">icon-check<br/>(d)</li>
      <li class="icon" data-icon="f">icon-clear<br/>(f)</li>
    </ul>
  </body>
</html>
